<template>
    <article class="comp-usc-recharge">
        <loading v-if="isLoading === true"></loading>
        <div class="web-content-recharge-usc" v-show="isLoading === false">
            <div class="web-logo">
                <p class="web-text">{{$t('asset.deposit.usc.title')}}</p>
            </div>
            <div class="web-content m-form-page m-form-login m-form-recharge">

                <!-- 充值usc 金额 选项 -->
                <div class="col-row recharge-amonut">
                    <label class="row-title">{{$t('asset.deposit.usc.moneyNo')}}</label>
                    <select v-model="defaultSeledMoneyVal" @change="selectMoney()">
                        <option :value="item.value" v-for="item in selectOptionsMoney">{{item.name}}</option>
                    </select>
                    <div class="usc-display">
                        <div class="usc-display-tit">{{$t('asset.deposit.usc.uscNum')}}</div> 
                        <div class="usc-display-con">{{uscNum}}</div>
                    </div>
                </div>
                <!-- <div class="usc-display"><div class="usc-display-tit">{{$t('asset.deposit.usc.uscNum')}}</div> <div class="usc-display-con">{{uscNum}}</div></div> -->


                <!-- <select-k :title="$t('asset.deposit.usc.yy')" :options="selectOptionsYY" :optionClick="selectYY" :selectedVal="defaultSeledYYVal"></select-k> -->

                <div class="col-row recharge-amonut">
                    <label class="row-title">{{$t('asset.deposit.usc.yy')}}</label>
                    <select v-model="defaultSeledYYVal" @change="selectYY()">
                        <option :value="item.value" v-for="item in selectOptionsYY">{{item.name}}</option>
                    </select>
                </div>

                <div class="col-row">
                    <label class="row-title">{{$t('asset.deposit.usc.cardNo')}}</label>
                    <input type="text"
                           :placeholder="$t('asset.deposit.usc.placeholderCardNo')"
                           name="email"
                           @focus="clearCardNoErr"
                           v-model="form.cardNo"
                           class="input"/>
                           <br/>
                    <div class="ui-tip">
                        <span class="error">{{cardNoErr}}</span>
                    </div>
                </div>
                <div class="col-row">
                    <label class="row-title">{{$t('asset.deposit.usc.password')}}</label>
                    <input type="text"
                           :placeholder="$t('asset.deposit.usc.placeholderPassword')"
                           v-model="form.password"
                           @focus="clearpwdErr"
                           name="password"
                           autocomplete="off"
                           class="input"/>
                           <br/>
                    <div class="ui-tip"><span class="error">{{passwordErr}}</span></div>
                </div>

                <div class="receive">
                    <button type="submit"
                            class="ui-btn ui-btn--block"
                            v-if="isRequesting === false"
                            @click="getPresned()"
                    >
                        {{ $t('common.confirm') }}
                    </button>
                    <button type="submit"
                            class="ui-btn  ui-btn--block"
                            disabled
                            v-if="isRequesting === true"
                    >
                        {{ $t('common.waiting') }}...
                    </button>
                </div>
            </div>
        </div>
    </article>
</template>

<script type="text/babel">

    import Vue from 'vue';
    import tpl from './tpl.html';


    import Loading from '../../../../../grsc-base/component/Loading.vue';
    import service from '../service'
    import lib from '../../../../common/lib';
    import SelectK from '../../../../component/SelectK.vue';
    import filter from '../../../../../grsc-base/util/filter';

    import lang from './lang.js';

    const moneyMark = {
        cn: '元',
        hk: '元',
        es: 'CNY',
        us: 'CNY'
    };


    export  default Vue.extend({
        components: {
            Loading,
            SelectK
        },
        data() {
            return {
                form:{
                    cardNo: '',
                    password: ''
                },
                isRequesting: false, // 按钮点击  是否请求中
                isLoading: false,

                // selectTitMoney: '金额',
                defaultSeledMoneyVal: 10,
                selectOptionsMoney: [
                    {name: '10 '+ moneyMark[this.$i18n.locale], value: 10},
                    {name: '20 '+ moneyMark[this.$i18n.locale], value: 20},
                    {name: '30 '+ moneyMark[this.$i18n.locale], value: 30},
                    {name: '50 '+ moneyMark[this.$i18n.locale], value: 50},
                    {name: '100 '+ moneyMark[this.$i18n.locale], value: 100},
                    {name: '300 '+ moneyMark[this.$i18n.locale], value: 300},
                    {name: '500 '+ moneyMark[this.$i18n.locale], value: 500}
                ],


                // selectTitYY: '运营商',
                defaultSeledYYVal: 0,
                selectOptionsYY: [
                    {name: '', value: 0},
                    {name: '', value: 1},
                    {name: '', value: 2}
                ],

                cardNoErr: '',
                passwordErr: '',

                uscNum: ''
            }
        },
        created() {
            this.selectOptionsYY.forEach((item,index)=>{
                item.name = lang[this.$i18n.locale].usc.yyVal[index];
            });
        },
        mounted() {
            this._getUsc();
        },
        methods: {
            _getUsc(){
                let uscNum = (this.defaultSeledMoneyVal * 0.975) / 6.69;
                this.uscNum = filter.floorFix(''+uscNum, 3);
            },
            // // 充值点击
            getPresned(){

                if(!this.form.cardNo){
                    console.log(this.$i18n.locale)
                    this.cardNoErr = lang[this.$i18n.locale].usc.cardNoErr;//'请输入正确的充值卡卡号';
                }

                if(!this.form.password){
                    this.passwordErr = lang[this.$i18n.locale].usc.passwordErr; //'请输入正确的充值卡密码';
                    return;
                }
                this.isRequesting = true;
                service.getPresned({
                    cardTypeCombine: this.defaultSeledYYVal,
                    payMoney: this.defaultSeledMoneyVal,
                    cardNum: this.form.cardNo,
                    cardPwd: this.form.password
                }).done((req)=> {
                    this.isGetCheckCode = req.code
                    if(req.data.code == 200){
                        this.form.cardNo = '';
                        this.form.password = '';
                        window.success(req.msg);
                    } else if(req.data.code == 404){
                        window.error(this.$t('asset.deposit.usc.reqNoneErr'));
                    }else{
                        window.error(this.$t('asset.deposit.usc.reqError'));
                    }
                }).always(() => {
                    this.isRequesting = false;
                    this.clearErrInfo();
                });




            },
            clearErrInfo(){
                this.cardNoErr = '';
                this.passwordErr = '';
            },
            clearpwdErr(){
                this.passwordErr = '';
            },
            clearCardNoErr(){
                this.cardNoErr = '';
            },
            selectMoney(){
                this._getUsc();
            },
            selectYY(){
                console.log(this.defaultSeledYYVal);
            }
        }
    })
</script>

<style lang="sass" rel="stylesheet/scss">
    .comp-usc-recharge{
        .web-content-recharge-usc {
            font-weight: bold;
        }

        .web-content-recharge-usc .web-logo {

            text-align: center;
            >img {}
            >p {
                font-size: 15px;
                text-align: left;
                line-height: 80px;
            }
        }

        .web-content-recharge-usc .web-content {
            padding: 40px 60px;
            background-color: rgba(255, 255, 255, .6);
            border: 1px #efefef solid;
            border-radius: 5px;
            text-align: center;
            .desc {
                padding-bottom: 50px;
                font-size: 13px;;
                line-height: 30px;
            }
            .disabled input {
                background-color: #fff;
            }
            .go-account {}
        }

        // 1-12 新充值样式
        .m-form-recharge{
            .col-row{
                text-align: left;
                min-height: 51px;
                margin-bottom: 12px;
                input,select{
                    width: 280px;
                }
            }
            
            .row-title{
                display: inline-block;
                line-height: 32px;
                width: 125px;
                text-align: right;
                padding-right: 10px;
            }
            // 金额  usc折合
            .recharge-amonut{
                .usc-display{
                    display: inline-block;
                    padding-left: 15px;
                    &-tit{
                        font-weight: bold;
                        font-size: 13px;;
                        float: left;
                        margin-right: 10px;
                        text-align: left;
                        color: #9b9d9e;
                    }
                    &-con{
                        float: left;
                        color: #9b9d9e;
                    }
                }
            }  
        }

        // 提示
        .ui-tip{
            display: block;
            text-align: left;
            font-weight: normal;
            padding-left:139px;
        }
        // 确定按钮
        .ui-btn{
            min-width: 133px;
            width: auto;
            margin-left: 140px;
        }
    }
</style>

<!-- 请保留以做备份   请勿删除   
    // 以下是所需要的数据源
    defaultSeledMoneyVal: 10,
    selectOptionsMoney: [
        {name: '10元', value: 10},
        {name: '20元', value: 20},
        {name: '30元', value: 30},
        {name: '50元', value: 50},
        {name: '100元', value: 100},
        {name: '300元', value: 300},
        {name: '500元', value: 500}
    ],


    <select-k 
        :title="$t('asset.deposit.usc.moneyNo')" 
        :options="selectOptionsMoney" 
        :optionClick="selectMoney" 
        :selectedVal="defaultSeledMoneyVal"
    >
    </select-k> 


    <select-k :title="$t('asset.deposit.usc.yy')" :options="selectOptionsYY" :optionClick="selectYY" :selectedVal="defaultSeledYYVal"></select-k>


    // 标签说明性的样式    请勿删除
    <div class="usc-display"><div class="usc-display-tit">{{$t('asset.deposit.usc.uscNum')}}</div> <div class="usc-display-con">{{uscNum}}</div></div>
    .usc-display{
        overflow: hidden;
        line-height: 50px;
        &-tit{
            font-weight: bold;
            font-size: 13px;;
            float: left;
            margin-right: 16px;
            min-width: 50px;
            text-align: left;
        }
        &-con{
            float: left;
            color: #9b9d9e;
        }
    }
-->



